import React from 'react'

import { Flex, Toast } from 'antd-mobile'

import {
  List,
  AutoSizer,
  WindowScroller,
  InfiniteLoader
} from 'react-virtualized'

import { getCurrentCity } from '../../utils/getCurrentCity'
import axios from '../../utils/request'

// 导入搜索导航栏组件
import SearchHead from '../../components/SearchHead'
import Filter from './components/Filter'
//导入HouseItem组件
import HouseItem from '../../components/HouseItem'

//导入Sticky组件
import Sticky from '../../components/Sticky'

// 导入样式
import styles from './index.module.css'

// 获取当前定位城市信息
const { label } = JSON.parse(localStorage.getItem('hzk_city'))

const ROW_HEIGHT = 120

export default class HouseList extends React.Component {
  state = {
    houseList: [],
    count: 0
  }

  componentDidMount() {
    this.getHouseList()
  }

  onFilter = async filters => {
    this.filters = filters
    this.getHouseList(filters)
  }

  async getHouseList(filters) {
    Toast.loading('加载中...', 0, null, false)
    const { value } = await getCurrentCity()
    this.cityId = value
    const { body } = await axios.get('/houses', {
      params: {
        cityId: value,
        ...filters
      }
    })
    // console.log(body)
    this.setState({
      houseList: body.list,
      count: body.count
    })
    Toast.hide()
  }

  rowRenderer = ({ key, index, isScrolling, isVisible, style }) => {
    const item = this.state.houseList[index]
    // console.log(this.state.houseList)
    if (!item) {
      return (
        <div key={key} style={style}>
          <div className={styles.loading} />
        </div>
      )
    }
    return (
      <div key={key} style={style}>
        <HouseItem {...item}></HouseItem>
      </div>
    )
  }

  isRowLoaded = ({ index }) => {
    return !!this.state.houseList[index]
  }

  loadMoreRows = ({ startIndex, stopIndex }) => {
    return new Promise(async resolve => {
      const {
        body: { list, count }
      } = await axios.get('/houses', {
        params: {
          ...this.filters,
          cityId: this.cityId,
          start: startIndex,
          end: stopIndex
        }
      })
      // console.log(list)
      this.setState({
        houseList: [...this.state.houseList, ...list],
        count
      })

      resolve()
    })
  }

  render() {
    const { count } = this.state

    return (
      <div className={styles.root}>
        {/* 顶部搜索导航 */}
        <Flex className={styles.header}>
          <i
            className="iconfont icon-back"
            onClick={() => this.props.history.go(-1)}
          />
          <SearchHead cityName={label} className={styles.searchHeader} />
        </Flex>

        {/* 条件筛选栏 */}
        <Sticky>
          <Filter onFilter={this.onFilter} />
        </Sticky>

        {/* 列表展示 */}
        <InfiniteLoader
          isRowLoaded={this.isRowLoaded}
          loadMoreRows={this.loadMoreRows}
          rowCount={count}
        >
          {({ onRowsRendered, registerChild }) => {
            return count ? (
              <WindowScroller>
                {({ height, isScrolling, scrollTop }) => (
                  <AutoSizer>
                    {({ width }) => (
                      <List
                        width={width}
                        height={height}
                        rowCount={count}
                        rowHeight={ROW_HEIGHT}
                        autoHeight
                        rowRenderer={this.rowRenderer}
                        isScrolling={isScrolling}
                        scrollTop={scrollTop}
                        className={styles.listBox}
                        onRowsRendered={onRowsRendered}
                        ref={registerChild}
                      />
                    )}
                  </AutoSizer>
                )}
              </WindowScroller>
            ) : null
          }}
        </InfiniteLoader>
      </div>
    )
  }
}
